<template>
    <div class="card content-box">
        <span class="text"> 按钮权限 🍓🍇🍈🍉</span>
        <el-alert class="mb20" :title="`当前用户按钮权限：${JSON.stringify(Object.keys(BUTTONS))}`" type="success"
            :closable="false" />
        <el-divider content-position="left"> 根据后端返回权限数组绑定权限 </el-divider>
        <el-row class="mb20">
            <el-button v-if="BUTTONS.add" type="primary" :icon="CirclePlus"> 新增 </el-button>
            <el-button v-if="BUTTONS.edit" type="warning" :icon="EditPen"> 编辑 </el-button>
            <el-button v-if="BUTTONS.delete" type="danger" plain :icon="Delete"> 删除 </el-button>
            <el-button v-if="BUTTONS.import" type="info" plain :icon="Upload"> 导入数据 </el-button>
            <el-button v-if="BUTTONS.export" type="info" plain :icon="Download"> 导出数据 </el-button>
        </el-row>
        <el-divider content-position="left"> 使用 v-auth 指令绑定单个权限 </el-divider>
        <el-row class="mb20">
            <el-button v-auth="'add'" type="primary" :icon="CirclePlus"> 新增 </el-button>
            <el-button v-auth="'edit'" type="warning" :icon="EditPen"> 编辑 </el-button>
            <el-button v-auth="'delete'" type="danger" plain :icon="Delete"> 删除 </el-button>
            <el-button v-auth="'import'" type="info" plain :icon="Upload"> 导入数据 </el-button>
            <el-button v-auth="'export'" type="info" plain :icon="Download"> 导出数据 </el-button>
        </el-row>
        <el-divider content-position="left"> 使用 v-auth 指令绑定多个权限 </el-divider>
        <el-row>
            <el-button v-auth="['add', 'edit', 'delete', 'import', 'export']" type="primary" :icon="CirclePlus"> 新增
            </el-button>
            <el-button v-auth="['add', 'edit', 'delete', 'import', 'export']" type="warning" :icon="EditPen"> 编辑
            </el-button>
            <el-button v-auth="['add', 'edit', 'delete', 'import', 'export']" type="danger" plain :icon="Delete"> 删除
            </el-button>
            <el-button v-auth="['add', 'edit', 'delete', 'import', 'export']" type="info" plain :icon="Upload"> 导入数据
            </el-button>
            <el-button v-auth="['add', 'edit', 'delete', 'import', 'export']" type="info" plain :icon="Download"> 导出数据
            </el-button>
        </el-row>
    </div>
</template>

<script setup lang="ts" name="AuthButton">
import { computed } from "vue";
import { useAuthStore } from "@/stores/modules/auth";
import { CirclePlus, Delete, EditPen, Download, Upload } from "@element-plus/icons-vue";
const authStore = useAuthStore();
// const authButtons = authStore.authButtonListGet[route.name as string] || [];
// const authButtons = authStore.authButtonListGet;
const authButtons = ['add', 'edit', 'delete', 'import', 'export'];
const BUTTONS = computed(() => {
    let currentPageAuthButton: { [key: string]: boolean } = {};
    // 将数组处理为对象，true表示有此权限，结合v-if使用
    authButtons.forEach(item => (currentPageAuthButton[item] = true));
    return currentPageAuthButton;
  });

//   或者封装成hook，直接解构使用BUTTONS，如下：
// import { computed } from "vue";
// import { useRoute } from "vue-router";
// import { useAuthStore } from "@/stores/modules/auth";

// /**
//  * @description 页面按钮权限
//  * */
// export const useAuthButtons = () => {
//   const route = useRoute();
//   const authStore = useAuthStore();
//   const authButtons = authStore.authButtonListGet[route.name as string] || [];

//   const BUTTONS = computed(() => {
//     let currentPageAuthButton: { [key: string]: boolean } = {};
//     authButtons.forEach(item => (currentPageAuthButton[item] = true));
//     return currentPageAuthButton;
//   });

//   return {
//     BUTTONS
//   };
// };
// 。。。
// const { BUTTONS } = useAuthButtons();
</script>
  
<style scoped lang="scss">
.content-box {
    align-items: flex-start;

    span {
        width: 100%;
        text-align: center;
    }
}
</style>
  